<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据字典</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js"></script>
    <style>
        *{
            padding: 0px;
        }
        .layui-table-cell{
            text-align:center;
            height: auto;
            white-space: normal;
        }
        .layui-form-select dl { max-height:100px; }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend><span style="font-size: xx-large;font-weight: bold;"> 数据字典</span></legend>
</fieldset>
<div class="layui-container">
    <div style="margin-top: 7vh;">
        <table class="layui-hide" id="dictionaryTable" lay-skin="line" lay-filter="dictionaryTable">
        </table>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="deleteDicValues">删除选中行</button>
        <button class="layui-btn layui-btn-normal" lay-event="saveDicType">新增类型</button>
        <button class="layui-btn layui-btn-normal" lay-event="saveDicValue">新增值</button>
    </div>
</script>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script>
    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        var tableIns = table.render({
            elem: '#dictionaryTable'
            ,url:'${pageContext.request.contextPath}/dictionary/getDictionary.do'
            ,toolbar: '#toolbar'
            ,defaultToolbar: []
            ,page: true
            ,limits: [5,10,20]
            ,limit: 10
            ,parseData: function(res){
                var result;
                if(this.page.curr){
                    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }
                else{
                    result=res.data.slice(0,this.limit);
                }
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": result
                };
            }
            ,initSort: {
                field: 'type'
                ,type: 'asc'
            }
            ,cols: [[
                {type:'checkbox'}
                ,{field:'typeId',title: 'ID',hide: true}
                ,{field:'type', title: '字典类型', sort: true}
                ,{field:'typeDescription', title: '描述'}
                ,{field:'valueId',title: 'ID',hide: true}
                ,{field:'value', title: '字典值', sort: true}
                ,{field:'cz',title: '操作', toolbar: '#bar'}
            ]]
        });
        table.on('tool(dictionaryTable)', function(obj){
            var data = obj.data;
            switch(obj.event){
                case 'delete':
                    layer.confirm('真的删除么', function(index){
                        $.ajax({
                            url:"${pageContext.request.contextPath}/dictionary/deleteDictionaryByVid.do",
                            data:{
                                "valueId" : data.valueId
                            },
                            type:"post",
                            dataType:"json",
                            success:function (n){
                                if(n.success){
                                    tableIns.reload();
                                    reload();
                                }else {
                                    layer.msg("删除失败");
                                }
                            }
                        });
                        layer.close(index);
                    });
                    break;
                case 'edit':
                    layer.open({
                        type: 1,
                        area: ['500px', '300px'],
                        shadeClose: true, //点击遮罩关闭
                        title: '修改字典值',
                        btn: ['确定', '取消'],
                        content: $("#editDicValueFrame"),
                        success: function (index, layero){
                            var typeId = data.typeId;
                            var value = data.value;
                            $("#edit-value").val(value);
                            $.ajax({
                                url:"${pageContext.request.contextPath}/dictionary/getDicType.do",
                                type:"get",
                                dataType:"json",
                                success:function (data){
                                    var html = "";
                                    $.each(data.dicTypeList,function (i,n){
                                        if(n.id===typeId){
                                            html += "<option value='"+n.id+"' selected>"+n.type+"</option>";
                                        }else {
                                            html += "<option value='"+n.id+"'>"+n.type+"</option>";
                                        }
                                    });
                                    $("#edit-dicType").html(html);
                                    form.render(null, 'editDicValueFrame');
                                }
                            })
                        },
                        yes: function (index, layero) {
                            var id = data.valueId;
                            var typeId = $("#edit-dicType").val();
                            var value = $("#edit-value").val();

                            if(typeId==='' || value===''){
                                layer.msg("请输入字典值信息");
                                return false;
                            }

                            $.ajax({
                                url:"${pageContext.request.contextPath}/dictionary/updateDicValue.do",
                                type:"post",
                                data: {
                                    "id": id,
                                    "typeId": typeId,
                                    "value": value
                                },
                                dataType:"json",
                                success:function (data){
                                    if(data.success){
                                        layer.msg("修改成功");
                                    }else {
                                        layer.msg("修改失败");
                                    }layer.close(index);
                                    tableIns.reload();
                                    reload();
                                }
                            })
                        },
                        end: function (res) {
                            $("#editDicValueFrame").css("display",'none');
                        }
                    });
                    break;
            };
        });
        table.on('toolbar(dictionaryTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'deleteDicValues':
                    var data = checkStatus.data;
                    var size = data.length;
                    if(size != 0){
                        layer.confirm('真的删除么', function(index){
                            for(let i = 0; i < size; i++){
                                $.ajax({
                                    url:"${pageContext.request.contextPath}/dictionary/deleteDictionaryByVid.do",
                                    data:{
                                        "valueId" : data[i].valueId
                                    },
                                    type:"post",
                                    async:false,
                                    dataType:"json",
                                    success:function (n){
                                        if(!n.success){
                                            layer.msg("删除失败");
                                        }
                                    }
                                });
                            }
                            layer.close(index);
                            reload();
                        });
                    }else {
                        layer.msg("请勾选要删除的数据字典");
                    }
                    break;
                case 'saveDicType':
                    layer.open({
                        type: 1,
                        area: ['420px', '250px'],
                        shadeClose: true, //点击遮罩关闭
                        title: '添加字典类型',
                        btn: ['确定', '取消'],
                        content: '<div style="text-align: center" id="saveDicTypeFrame" >'+
                            '<form class="layui-form layui-form-pane layui-fluid" style="padding-top: 20px;">'+
                            '<div class="layui-form-item">'+
                            '<div class="layui-inline">'+
                            '<label class="layui-form-label">类型</label>'+
                            '<div class="layui-input-inline">'+
                            '<input class="layui-input" id="save-type" autocomplete="off"  placeholder="类型（推荐英文）">'+
                            '</div>'+
                            '</div>'+
                            '</div>'+
                            '<div class="layui-form-item">'+
                            '<div class="layui-inline">'+
                            '<label class="layui-form-label">描述</label>'+
                            '<div class="layui-input-inline">'+
                            '<input class="layui-input" id="save-description" autocomplete="off"  placeholder="描述">'+
                            '</div>'+
                            '</div>'+
                            '</div>'+
                            '</form>'+
                            '</div>',
                        success: function (index, layero){
                            $("#save-description").val("");
                            $("#save-type").val("");
                        },
                        yes: function (index, layero) {
                            var type = $("#save-type").val();
                            var description = $("#save-description").val();

                            if(type==='' || description===''){
                                layer.msg("请输入字典类型信息");
                                return false;
                            }

                            $.ajax({
                                url:"${pageContext.request.contextPath}/dictionary/saveDicType.do",
                                type:"post",
                                data: {
                                    "type": type,
                                    "description": description
                                },
                                dataType:"json",
                                success:function (data){
                                    if(data.success){
                                        layer.msg("添加"+type+"成功");
                                    }else {
                                        layer.msg("添加"+type+"失败");
                                    }layer.close(index);
                                    tableIns.reload();
                                    reload();
                                }
                            })
                        }
                    });
                    break;
                case 'saveDicValue':
                    layer.open({
                        type: 1,
                        area: ['500px', '300px'],
                        shadeClose: true, //点击遮罩关闭
                        title: '添加字典值',
                        btn: ['确定', '取消'],
                        content: $("#saveDicValueFrame"),
                        success: function (index, layero){
                            $("#save-value").val("");
                            $.ajax({
                                url:"${pageContext.request.contextPath}/dictionary/getDicType.do",
                                type:"get",
                                dataType:"json",
                                success:function (data){
                                    var html = "";
                                    $.each(data.dicTypeList,function (i,n){
                                        html += "<option value='"+n.id+"'>"+n.type+"</option>";
                                    });
                                    $("#save-dicType").html(html);
                                    form.render(null, 'saveDicValueFrame');
                                }
                            })
                        },
                        yes: function (index, layero) {
                            var typeId = $("#save-dicType").val();
                            var value = $("#save-value").val();

                            if(typeId==='' || value===''){
                                layer.msg("请输入字典值信息");
                                return false;
                            }

                            $.ajax({
                                url:"${pageContext.request.contextPath}/dictionary/saveDicValue.do",
                                type:"post",
                                data: {
                                    "typeId": typeId,
                                    "value": value
                                },
                                dataType:"json",
                                success:function (data){
                                    if(data.success){
                                        layer.msg("添加"+value+"成功");
                                    }else {
                                        layer.msg("添加"+value+"失败");
                                    }layer.close(index);
                                    tableIns.reload();
                                    reload();
                                }
                            })
                        },
                        end: function (res) {
                            $("#saveDicValueFrame").css("display",'none');
                        }
                    });
                    break;
            };
        });

        function reload(){
            $.ajax({
                url:"${pageContext.request.contextPath}/dictionary/reloadDictionary.do",
                type:"get"
            })
        }

    });
</script>
<div style="text-align: center;display: none;" id="saveDicValueFrame">
    <form lay-filter="saveDicValueFrame" class="layui-form layui-form-pane layui-fluid" style="padding-top: 20px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">所属类型</label>
                <div class="layui-input-inline">
                    <select name="" id="save-dicType">
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">值</label>
                <div class="layui-input-inline">
                    <input class="layui-input" id="save-value" autocomplete="off"  placeholder="值">
                </div>
            </div>
        </div>
    </form>
</div>
<div style="text-align: center;display: none;" id="editDicValueFrame">
    <form lay-filter="editDicValueFrame" class="layui-form layui-form-pane layui-fluid" style="padding-top: 20px;">
        <input class="layui-input" type="hidden" id="edit-valueId">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">所属类型</label>
                <div class="layui-input-inline">
                    <select name="" id="edit-dicType">
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">值</label>
                <div class="layui-input-inline">
                    <input class="layui-input" id="edit-value" autocomplete="off"  placeholder="值">
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>